<!--SMT合并站位表-->
<template>
  <basic-container>
    <el-row>
      <avue-crud
        :option="option"
        :table-loading="loading"
        :data="data"
        :page.sync="page"
        :search.sync="query"
        :permission="permissionList"
        :before-open="beforeOpen"
        v-model="form"
        ref="crud"
        @row-update="rowUpdate"
        @row-save="rowSave"
        @row-del="rowDel"
        @search-change="searchChange"
        @search-reset="searchReset"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @on-load="onLoad"
      >
        <template slot="menuLeft">
          <el-button type="warning" size="small" icon="el-icon-upload2" v-if="permission.smt_standtable_add" @click="handleImport">导 入 </el-button>
          <el-button type="danger" size="small" icon="el-icon-delete" v-if="permission.smt_standtable_delete" @click="handleDelete">删 除 </el-button>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-view" v-if="permission.smt_standtable_view" @click="handleDetail(scope.row, scope.index)">详情</el-button>
          <el-button type="text" size="small" icon="el-icon-edit" v-if="permission.smt_standtable_edit" @click="handleEdit(scope.row, scope.index)">编辑</el-button>
        </template>
      </avue-crud>
    </el-row>
    <!-- 导入 -->
    <smtStandImport ref="smtStandImport" :multiple="true" :showImportDialog="showImportDialog" @closeImportDialog="closeImportDialog"></smtStandImport>

    <!-- 编辑 -->
    <smtStandEdit ref="smtStandEdit" :showEditDialog="showEditDialog" @closeEditDialog="closeEditDialog"></smtStandEdit>

    <!-- 详情 -->
    <smtStandDetail ref="smtStandDetail" :showDetailDialog="showDetailDialog" @closeDetailDialog="closeDetailDialog"> </smtStandDetail>

    <global-modal-template :visibile.sync="visibile" :option="tableOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"> </global-modal-template>
  </basic-container>
</template>

<script>
import GlobalModalTemplate from '@/components/common-modal-template/global-modal-template.vue';
import smtStandImport from '@/views/product/components/smtStandImport.vue';
import smtStandEdit from '@/views/product/components/smtStandEdit.vue';
import smtStandDetail from '@/views/product/components/smtStandDetail.vue';

import { getList, getDetail, add, update, remove, removeTrack, verifyMachineCodeOrPartNo } from '@/api/product/smtStandTable';
import { mapGetters } from 'vuex';
export default {
  components: {
    GlobalModalTemplate,
    smtStandImport,
    smtStandEdit,
    smtStandDetail
  },
  data() {
    return {
      option: {
        height: 'calc(100vh - 450px)',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        border: true,
        index: true,
        indexLabel: '序号',
        searchMenuSpan: 6,
        searchLabelWidth: 90,
        viewBtn: false,
        editBtn: false,
        addBtn: false,
        labelWidth: 130,
        selection: true,
        highlightCurrentRow: true, // 选中高亮
        dialogClickModal: false,
        searchMenuPosition: 'right',
        searchSpan: 6,
        column: [
          {
            label: '产品编码', //，可以多个，‘，’分隔，供详情选择产品时过滤使用
            prop: 'partNos',
            disabled: true,
            search: true,
            rules: [
              {
                required: true,
                message: '请输入产品编码',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '产品名称',
            prop: 'partNames'
          },
          {
            label: '站位表名称',
            prop: 'name',
            search: true
          },
          {
            label: '面向',
            prop: 'side',
            type: 'select',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            dicUrl: '/api/blade-system/dict/dictionary?code=side_type',
            rules: [
              {
                required: true,
                message: '请输入面向',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '设备品牌',
            prop: 'machineBrand'
          },
          {
            label: '站位表版本',
            prop: 'tableVersion'
          },
          {
            label: '站位表编码',
            prop: 'code',
            rules: [
              {
                required: true,
                message: '请输入站位表编码',
                trigger: 'blur'
              }
            ]
          }
        ]
      },
      form: {},
      showImportDialog: false,
      showEditDialog: false,
      showDetailDialog: false,
      query: {},
      cloneForm: {},
      loading: true,
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      data: [],
      visibile: false,
      modalName: '', //打开公用模态框名称
      tableOption: {}, //公用模态框配置信息
      timer: new Date().getTime() //不同内容使用同一个模态框结构，key值不同需要重新请求渲染数据，否则会请求到上一个使用的数据内容
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$structuralSplit();
    });
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.smt_standtable_add, false),
        viewBtn: this.vaildData(this.permission.smt_standtable_view, false),
        delBtn: this.vaildData(this.permission.smt_standtable_delete, false),
        editBtn: this.vaildData(this.permission.smt_standtable_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(',');
    }
  },
  methods: {
    rowSave(row, done, loading) {
      row['partNames'] = this.form.partNames;
      add(row).then(
        () => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          done();
        },
        (error) => {
          loading();
          window.console.log(error);
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      verifyMachineCodeOrPartNo({
        tableId: row.id,
        originMachineCode: this.cloneForm.machineCode,
        newMachineCode: row.machineCode,
        originPartNos: this.cloneForm.partNos,
        newPartNos: row.partNos
      }).then((res) => {
        if (res.data.code === 200) {
          update(row).then(
            () => {
              this.onLoad(this.page);
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              done();
            },
            (error) => {
              loading();
              console.log(error);
            }
          );
        }
      });
      done();
    },

    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });
    },
    handleImport() {
      this.showImportDialog = true;
    },
    handleDetail(row, index) {
      this.showDetailDialog = true;
      this.$refs.smtStandDetail.getData(row.id);
    },
    handleEdit(row, index) {
      this.$refs.smtStandEdit.getData(row.id);
      this.showEditDialog = true;
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning('请选择至少一条数据');
        return;
      }
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.$refs.crud.toggleSelection();
        });
    },
    beforeOpen(done, type) {
      if (['edit', 'view'].includes(type)) {
        getDetail(this.form.id).then((res) => {
          this.form = res.data.data;
          this.cloneForm = this._cloneDeep(res.data.data);
        });
      }
      if (['add', 'edit'].includes(type)) {
      }
      done();
    },

    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      let len = list.length - 1;
      this.selectionList = list;
    },

    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query), 'ALL').then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
      });
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    closeImportDialog() {
      this.showImportDialog = false;
      this.onLoad(this.page);
    },
    closeEditDialog() {
      this.showEditDialog = false;
      this.onLoad(this.page, this.query);
    },
    closeDetailDialog() {
      this.showDetailDialog = false;
    },
    newKey() {
      this.timer = new Date().getTime();
    }
  }
};
</script>

<style lang="scss" scoped></style>
